<template>
  <el-dialog :visible.sync="modelValue" width="30%" :title="'续费'" append-to-body :modal-append-to-body="false"
    :close-on-click-modal="false" top="5vh" @close="close">
    <div class="dialog-content">
      <div class="">
        <div class="company-info-card">
          <div class="company-header">
            <div class="company-name">{{ qyInfo.name || '--' }}</div>
            <div class="version-info">{{ qyInfo.type_txt || '--' }}</div>
          </div>
          <div class="expire-info">
            <span>到期时间：{{ qyInfo.endtime_txt || '--' }}</span>
          </div>
        </div>
        <div class="service-fee-list" v-if="extendayInfo.gdls && extendayInfo.gdls.length > 0">
          <div class="fee-item" v-for="(item,index) in extendayInfo.gdls" :key="index">
            <div class="fee-title">{{item.title}}</div>
            <div class="fee-detail">
              <div class="fee-price">现价 ¥ {{item.price_str}}</div>
              <div class="fee-original">原价 ¥ {{item.price0_str}}</div>
            </div>
          </div>
        </div>
        <div class="renewal-info">
          <div class="renewal-item">
            <span class="renewal-label">续费时长</span>
            <span class="renewal-value">{{ extendayInfo.extenday_txt || '--' }}</span>
          </div>
          <div class="renewal-item">
            <span class="renewal-label">总计</span>
            <span class="renewal-value">¥ {{ extendayInfo.amount0 || '--' }}</span>
          </div>
          <div class="renewal-item">
            <span class="renewal-label">总计</span>
            <span class="renewal-value">¥ {{ extendayInfo.amount0 || '--' }}</span>
          </div>
          <div class="renewal-item highlight">
            <span class="renewal-label">限时优惠</span>
            <span class="renewal-value discount">¥ {{ extendayInfo.favour || '--' }}</span>
          </div>
          <div class="renewal-item total">
            <span class="renewal-label">应付</span>
            <span class="renewal-value final">¥ {{ extendayInfo.amount_pay || '--' }}</span>
          </div>
        </div>
      </div>
      <div class="flex_center dialog-content-footer">
        <el-button @click="close" size="small" style="width: 150px;"> 取消 </el-button>
        <el-button type="primary" @click="creatWxQrcode" size="small" style="width: 150px;"> 微信支付 </el-button>
      </div>
    </div>
    <el-dialog :visible.sync="modeQRlValue" width="20%" :title="'付款二维码'" append-to-body :modal-append-to-body="false"
      :close-on-click-modal="false" top="15vh" @close="closeQr">
      <view class="item-qr-box flex_center_column" id="qrBox" v-if="wxPayCodeurl">
        <ayQrcode ref="qrcode" qrcode_id="qrcode2" :modal="modal_qr" :url="wxPayCodeurl" :height="wh" :width="wh"
          @hideQrcode="hideQrcode" themeColor="#000" />
        <h3 class="mt20 mb20"> 请用微信扫码完成支付 </h3>
      </view>
      <div class="flex_center dialog-content-footer">
        <el-button @click="closeQr" size="small" style="width: 150px;"> 取消 </el-button>
        <el-button type="primary" @click="compPayHandle" size="small" style="width: 150px;"> 我已支付，重新登录
        </el-button>
      </div>
    </el-dialog>

  </el-dialog>
</template>

<script>
import config from "@/js/conf/Config.js"
import https from "@/js/https/Https.js";
import localStore from "@/js/LocalStore.js";
import ayQrcode from "@/components/comm/ay-qrcode/ay-qrcode.vue";
import tabBarConntrl from "@/js/TabBarContrl.js";

export default {
  name: 'renewVersionDialog',
  components: {
    ayQrcode,
  },
  data() {
    return {
      modelValue: false,
      modeQRlValue: false,
      loading: false,
      currInfo: {},
      wxPayCodeurl: "",
      wh: 200,
      modal_qr: false,
      extendayInfo:{},
      qyInfo:{},
    }
  },
  mounted() {
    // Vue 2 生命周期钩子
  },
  beforeDestroy() {
    // Vue 2 生命周期钩子
  },
  destroyed() {
    // Vue 2 生命周期钩子
  },
  methods: {
    // 提交创建订单
    async creatWxQrcode() {
      try {
        let param = {
          ch: this.qyInfo.type == 1 ? 1 : this.qyInfo.type == 2 ? 3 : 3, // 场景：1=试用后购买；2爱搜企业注册；3续费
          cpid: this.qyInfo.id,
          gd_ls: [{ gdid: this.qyInfo.id, number: "1" }],
        }
        this.loading = true
        let res = await this.$api({ url: config.sysbuy_order_add, data: param });
        if (res.status == 1) {
          this.creatQrcode(res.data);
        }
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },

    /***微信支付二维码数据*****/
    async creatQrcode(data) {
      let user = await localStore.getUserInfo();
      let param = {};
      param.timeline = Math.floor(new Date().getTime() / 1000); //当前时间戳，校验sign过期需要
      param.paytype = 'wxntv';
      param.objtype = '04';
      param.objid = data.odid;
      param.money_pay = this.extendayInfo.amount_pay;
      param.cpid = this.qyInfo.id;
      // param.uid = user.uid;
      // param.debug = 1;
      https.wxPayQrcode(param, this._handleQrcodeResponse);
    },

    _handleQrcodeResponse(data) {
      if (!data) return;
      if (data.status == 1) {
        if (!data.data) return;
        data = data.data;
        this.wxPayCodeurl = data.pay_param.code_url;
        this.modeQRlValue = true
        this.showQrcode()
      }
    },

    showQrcode() {
      this.modal_qr = true;
      uni.showLoading(
        {
          title: "加载中...",
          mask: true
        });
      setTimeout(() => {
        uni.hideLoading();
        this.$refs.qrcode.crtQrCode();
      }, 500);
    },

    // 完成支付
    compPayHandle() {
      tabBarConntrl.close();
    },

    async getExtendayInfo(data) {
      try {
        this.loading = true
        let res = await this.$api({ url: config.extenday_info, data: { cpid: data.id } });
        if (res.status == 1) {
          this.extendayInfo = res.data
        }
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },

    chooseHandle(item) {
      this.currInfo = item
    },

    open(prams) {
      this.wxPayCodeurl = ''
      this.currInfo = {}
      this.modelValue = true
      this.$nextTick(() => {
        this.getExtendayInfo(prams)
        this.qyInfo = prams
      })
    },

    close() {
      this.modelValue = false
      this.wxPayCodeurl = ''
    },

    closeQr() {
      this.modeQRlValue = false
      this.wxPayCodeurl = ''
    },

    hideQrcode() {
      // 处理隐藏二维码事件
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-content {
  display: flex;
  flex-direction: column;
  height: 550px;

  &-header {
    margin-bottom: 10px;
  }

  &-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 20px;
  }

  &-footer {
    margin: 14px 0 0 0;
  }
}
.company-info-card {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid #e4e7ed;
  
  .company-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    
    .company-name {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
    
    .version-info {
      background: #e6f7ff;
      color: #1890ff;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
    }
  }
  
  .expire-info {
    font-size: 14px;
    color: #606266;
  }
}

.service-fee-list {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid #e4e7ed;
  
  .fee-item {
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .fee-title {
      font-size: 14px;
      font-weight: 500;
      color: #303133;
      margin-bottom: 8px;
    }
    
    .fee-detail {
      
      .fee-price {
        font-size: 14px;
        color: #67c23a;
        margin-bottom: 4px;
      }
      
      .fee-original {
        font-size: 12px;
        color: #909399;
      }
    }
  }
}

.renewal-info {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 16px;
  
  .renewal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .renewal-label {
      font-size: 14px;
      color: #606266;
    }
    
    .renewal-value {
      font-size: 14px;
      color: #303133;
    }
    
    &.highlight .renewal-value.discount {
      color: #67c23a;
      font-weight: 500;
    }
    
    &.total {
      border-top: 1px solid #e4e7ed;
      padding-top: 12px;
      margin-top: 12px;
      
      .renewal-label {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
      }
      
      .renewal-value.final {
        font-size: 18px;
        font-weight: 600;
        color: #f56c6c;
      }
    }
  }
}

.list-cell {
  border-radius: 8px;
  padding: 10px;
  background-color: #f5f7fa;
  margin-bottom: 10px;
  border: 1px solid #f5f7fa;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-in-out;

  .selete_img {
    position: absolute;
    top: 0;
    right: 0;
    height: 20px;
    width: 20px;
  }
}

.list-cell:hover {
  background-color: rgba(108, 159, 241, 0.2);
}

.active {
  background-color: rgba(108, 159, 241, 0.2);
}
</style>